import React from "react";
import {ActivityIndicator, Alert, InteractionManager, Text, TouchableOpacity, View} from "react-native";
import GiftedListView from "react-native-gifted-listview";
import ModuleCommonHeader from "../module/ModuleCommonHeader";
import chjStyle from "../../CustomStyle";
import Util from "../Util";
import CommonRenderer from "./CommonRenderer";
import {Actions} from "react-native-router-flux";

export default class CarsForSaleOfSearchResult extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {
            isLoading: true,
        };
        // 设置定时重复任务的示例
        // setInterval(()=>{}, 1000);
    }

    // 组件被加载时
    componentDidMount() {
        InteractionManager.runAfterInteractions(
            () => {
                this.setState({isLoading: false})
            }
        );
    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    // 组件被渲染时
    render() {
        if (this.state.isLoading) {
            return (
                <View style={chjStyle.mainContainer}>
                    <ModuleCommonHeader title={this.props.route.keyword + '的查询结果'} leftText='返回'
                                        clickedLeft={() => Actions.pop()}/>
                    <ActivityIndicator
                        animating={true}
                        style={{alignItems: 'center', justifyContent: 'center', height: chjStyle.height}}
                        size="large"/>
                </View>
            );
        }
        return (
            <View style={chjStyle.mainContainer}>
                <ModuleCommonHeader
                    title={this.props.route.keyword + '的查询结果'} leftText='返回'
                    clickedLeft={() => Actions.pop()}
                />
                <GiftedListView
                    ref='glv'
                    style={chjStyle.recordContainer}
                    initialListSize={5}
                    rowView={this.renderRow.bind(this)}
                    onFetch={this.onFetch.bind(this)}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    paginationFetchigView={this.renderPaginationFetchigView}
                    paginationAllLoadedView={this.renderPaginationAllLoadedView}
                    paginationWaitingView={this.renderPaginationWaitingView}

                    refreshable={false} // enable pull-to-refresh for iOS and touch-to-refresh for Android

                    withSections={false} // enable sections
                    refreshableTintColor="#999999"
                />
            </View>
        );
    }


    renderPaginationFetchigView() {
        return (
            <View style={{backgroundColor: '#f6f6f6', height: chjStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: chjStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: chjStyle.getActualSizeInVertical(20),
                    color: '#ddd'
                }}>加载中..</Text>
            </View>
        );
    }

    renderPaginationAllLoadedView() {
        return (
            <View style={{backgroundColor: '#f6f6f6', height: chjStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: chjStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: chjStyle.getActualSizeInVertical(20),
                    color: '#ddd',
                    fontSize: chjStyle.getActualFontSize(32)
                }}>没有更多车辆啦...</Text>
            </View>
        );
    }

    /// 渲染一个footer，需要点击事件
    renderPaginationWaitingView(paginateCallback) {
        return (
            <TouchableOpacity onPress={paginateCallback}
                              style={{backgroundColor: '#f6f6f6', height: chjStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: chjStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: chjStyle.getActualSizeInVertical(20),
                    color: '#ddd',
                    fontSize: chjStyle.getActualFontSize(32)
                }}>查看更多车辆</Text>
            </TouchableOpacity>
        );
    }

    renderRow(rowData) {
        return <CommonRenderer rowData={rowData} navigator={this.props.navigator}/>;
    }

    onFetch(page = 1, callback, options) {
        const user = Util.getUser();
        var params = {
            token: user.token,
            useid: user.id,
            keyword: this.props.route.keyword,
            page: page,
            pagesize: 20
        };
        Util.postServer('user/searchcarslist', params,
            (result) => {
                callback(result.data.pagebean.list, {
                    allLoaded: result.data.pagebean.list.length == 0,
                });
            },
            (msg) => {
                Alert.alert('错误', '你的网络堵车啦..' + msg);
                callback();
            }
        );
    }
}
